<template>
  <div>
    <!-- <div>
      <div class="avatar">
        <img :src="zmImg">
      </div>
      <p class="tips">将使用您提供的以下资料，查询芝麻信用分</p>
      <div class="form">
        <div class="block">
          <div class="group hairlines">
            <label for="name">姓名</label>
            <input class="readonly" id="name" type="text" :value="name" readonly>
          </div>
          <div class="group">
            <label for="IDCard">身份证</label>
            <input class="readonly" id="IDCard" type="text" :value="IDCard" readonly>
          </div>
        </div>
      </div>
    </div> -->
    <div id='zm_box'>
      <div class='zmBox'>
        <div class='zmBox_list'>
          <span class='zmBox_title'>芝麻信用分</span>
          <input type="number" v-model="zmFen" placeholder="请输入芝麻信用分">
        </div>
        <div>
          <span class='zmBox_title'>上传芝麻信用分截图</span>
          <div class='zm_file_box'>
            <!-- <input type="file" name="" ref='zm_img' class='zm_file'>
            <div v-if='!zmFile'>
               <img :src="uploadLogo">
            </div>
            <img v-if='zmFile'> -->
            <img ref="fileToImg" :src="zmFile === null ? uploadLogo : zmFile" :class="{uploadLogos: !fileisOK , zmFiles: fileisOK}">
            <!-- <input ref="fileInput" id="residence_permit" type="file"> -->
            <input type="file" id='zm_file' ref='zm_img' class='zm_file'>
          </div>
        </div>
      </div>
    </div>
    <footer class="form-footer">
      <button class="return hairlines-top" @click="back"><i class="iconfont icon-return2"></i>返回</button>
      <input class="next" type="button" :value="ischecked ? '已验证' : '确定验证'" @click="toNext" :disabled="ischecked">
    </footer>
    <!-- <loading v-show="loadingIsShow" :show="loadingIsShow"></loading> -->
  </div>
</template>
<script>
  // import zmImg from './img/zm.png'
  import uploadLogo from './img/upload_logo.png'
  import $ from 'edom'
  // import loading from '../loading/loading.vue'
  import fileRead from '../../../assets/js/fileRead.js'
  export default {
    name: 'zmCheck',
    data () {
      return {
        title: '验证芝麻分',
        uploadLogo: uploadLogo,
        name: this.$store.state.profile.base.real_name,
        IDCard: this.$store.state.profile.base.id_card_no,
        ischecked: this.$store.state.profile.zm,
        zmFen: '',
        zmFile: null,
        base64Img: '',
        // loadingIsShow: false,
        fileisOK: false
      }
    },
    methods: {
      back () {
        this.$router.push('/profile/manage')
      },
      toNext () {
        // this.$store.commit('profileStepSet', 6)
        // this.$router.push('/profile/step6')
        // this.loadingIsShow = true
        //
        if (!this.base64Img || !this.zmFen) {
          $().Mnews('请完善信息！')
        } else {
          this.axios.post('/api/zhimaContract/put_zhima', {
            user_id: this.$store.state.user_id,
            token: this.$store.state.token,
            zhima_pic: this.base64Img,
            zhima_score: this.zmFen
          }).then((res) => {
            let data = res.data
            if (data.code === 1) {
              // $().Mnews(data.desc)
              // this.$store.commit('zmQuotaChecked')
              this.$store.commit('profileStepSet', 8)
              // this.$router.push('/assessment')
              this.$router.push({name: 'Assessment', params: {state: 0}})
              // location.href = data.desc
            } else {
              $().Mnews(data.desc)
            }
            this.loadingIsShow = false
          })
        }
        // let QNYpromise = new Promise(this.getQNYToken)
        // QNYpromise.then(() => {
        //   return new Promise(this.uploadQNY)
        // }).then(() => {
        //   this.saveInfo()
        // })
      }
    },
    // addLoading: function () {
    //   this.loadingIsShow = true
    // },
    // delLoading: function () {
    //   this.loadingIsShow = false
    // },
    created () {
      document.title = this.title
    },
    beforeMount () {
      this.axios.post('http://ai.iasfq.com/api/zhimaContract/get_zhima', {
        user_id: this.$store.state.user_id
      }).then((res) => {
        let data = res.data
        if (data.zhima_score) {
          this.zmFen = data.zhima_score
        } else {
          this.zmFen = ''
        }
        if (data.zhima_pic) {
          this.zmFile = data.zhima_pic
          this.fileisOK = !this.fileisOK
        } else {
          this.zmFile = null
        }
      })
    },
    mounted () {
      let file = this.$refs
      fileRead(file.zm_img, {
        readAs: 'dataurl',
        zip: true,
        zipWidth: file.offsetWidth * 2,
        zipQuality: 0.7,
        loadStart: () => {
          // this.addLoading()
        },
        loadEnd: () => {
          setTimeout(() => {
            // this.delLoading()
          }, 300)
        },
        success: (result, resultHandle) => {
          this.base64Img = resultHandle[0]
          file.fileToImg.setAttribute('src', result[0])
          this.fileisOK = !this.fileisOK
          // console.log(this.base64Img)
        },
        error: function (msg) {
          // console.log(msg)
          $().Mnews(msg, 1000)
        }
      })
    }
  }
</script>
<style lang="scss" scoped>
  @import '../../../styles/form.scss';
  .avatar{
    padding-top: rem(110);
    img{
      display: block;
      margin: 0 auto rem(65) auto;
      width: rem(260);
      height: rem(324);
    }
  }
  .tips{
    padding: rem(20) rem(24);
    font-size: rem(28);
    color: #999;
  }
  .form{
    .block{
      .group{
        .readonly{
          color: #999;
        }
      }
    }
  }
  .form-footer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }
  .next:disabled{
    background: #d0d0d0;
  }


  #zm_box{
    padding-top:rem(20);
  }
  .zmBox{
    background:#fff;
    padding: 0 rem(24) rem(60);
    .zmBox_list{
      display:flex;
      align-items:center;
      justify-content:space-between;
      border-bottom:1px solid #ddd;
      height:rem(88);
      input{
        width:100%;
        text-align:right;
        color:#666;
        font-size:rem(28);
      }
      -placeholder:{
        color:#b2b2b2;
        font-size:rem(28);
      }
    }
  }
  span.zmBox_title{
    color:#333;
    font-size:rem(30);
    white-space:nowrap;
  }
  .zm_file_box{
    position:relative;
    width:rem(411);
    height:rem(264);
    margin:rem(60) auto 0;
    background:#f5f5f5;
    overflow:hidden;
    .zm_file{
      opacity:0;
      width:100%;
      height:100%;
      position:absolute;
      top:0;
      right:0;
      left:0;
      bottom:0;
      z-index:5;
    }
    img{
      position:absolute;
      top:0;
      right:0;
      left:0;
      bottom:0;
      margin:auto;
    }
    .uploadLogos{
      width:rem(112);
      height:rem(112);
    }
    .zmFiles{
      width:100%;
      height:100%;
    }
  }
</style>
